<template>
  <view>
    <view class="container">
      <div style="height: 10px;"></div>
      <div class="topBgc"
        :style="indent == '维保' ? 'background:#e7d3f8' : indent == '巡检' ? 'background:#d3f8f4' : 'background:#e9f8d3'">
        <div style="width: 90%;margin-left: 5%;display: flex;align-items: center;justify-content: space-between;">
          <div>
            <div style="height: 20px;"></div>
            <div class="fontTitle">
              <div>点击下面按钮</div>
              <div v-if="indent != '知识库'">立刻进行设备{{ indent == '维保' ? '报停' : '报修' }}</div>
              <div v-show="indent == '知识库'">立刻进行生产报备</div>
            </div>
            <div style="height: 20px"></div>
            <image @click="carStop" style="width: 70rpx;height: 70rpx;"
              src="https://28-1325662301.cos.ap-shanghai.myqcloud.com/%E9%9D%92%E5%B2%9B%E5%B0%8F%E7%A8%8B%E5%BA%8F%2FGroup%202378.png" />
            <div style="height: 20px;"></div>
          </div>
          <div class="cilcle">
            {{ indent == '维保' ? weibao.repairRate : indent == '巡检' ? xunjian.repairRate : zhishiku.learningRatio }}
          </div>
        </div>
      </div>
      <div style="height: 10px;"></div>
      <view class="grid_box">
        <view
          style="width: 320rpx;height: 300rpx;background-color: #fff;border-radius: 40rpx;padding: 40rpx;box-sizing: border-box;margin-top: 30rpx;">
          <image style="width: 80rpx;height: 80rpx;"
            src="https://28-1325662301.cos.ap-shanghai.myqcloud.com/%E9%9D%92%E5%B2%9B%E5%B0%8F%E7%A8%8B%E5%BA%8F%2FGroup%202382.png" />
          <view style="font-size: 60rpx;color: #000;font-weight: 700;margin-bottom: 10rpx;">
            <!-- {{ weibao.repairNum }} -->
            {{ indent == '维保' ? weibao.finishNum : indent == '巡检' ? xunjian.finishNum : zhishiku.completed }}
          </view>
          <view style="font-size: 24rpx;">
            今日{{ indent == '知识库' ? '培训' : indent }}次数总览
          </view>
        </view>
        <view
          style="width: 320rpx;height: 300rpx;background-color: #fff;border-radius: 40rpx;padding: 40rpx;box-sizing: border-box;margin-top: 30rpx;">
          <image style="width: 80rpx;height: 80rpx;"
            src="https://28-1325662301.cos.ap-shanghai.myqcloud.com/%E9%9D%92%E5%B2%9B%E5%B0%8F%E7%A8%8B%E5%BA%8F%2FGroup%202381.png" />
          <view style="font-size: 60rpx;color: #000;font-weight: 700;margin-bottom: 10rpx;">
            {{ indent == '维保' ? weibao.totalNum : indent == '巡检' ? xunjian.totalNum : zhishiku.total }}
          </view>
          <view style="font-size: 24rpx;">
            {{ indent == '知识库' ? '累计' : '累计' }}{{ indent == '知识库' ? '培训' : indent }}次数总览
          </view>
        </view>
        <view @click="proce"
          style="width: 320rpx;height: 300rpx;background-color: #fff;border-radius: 40rpx;padding: 40rpx;box-sizing: border-box;margin-top: 30rpx;">
          <image style="width: 80rpx;height: 80rpx;"
            src="https://28-1325662301.cos.ap-shanghai.myqcloud.com/%E9%9D%92%E5%B2%9B%E5%B0%8F%E7%A8%8B%E5%BA%8F%2FGroup%202383.png" />
          <view style="font-size: 60rpx;color: #000;font-weight: 700;margin-bottom: 10rpx;">
            {{ indent == '维保' ? weibao.pendingNum : indent == '巡检' ? xunjian.pendingNum : zhishiku.outPend }}
          </view>
          <view style="font-size: 24rpx;">
            我的待{{ indent == '知识库' ? '考试' : '处理' }}数量
          </view>
        </view>
        <view
          style="width: 320rpx;height: 300rpx;background-color: #fff;border-radius: 40rpx;padding: 40rpx;box-sizing: border-box;margin-top: 30rpx;">
          <image style="width: 80rpx;height: 80rpx;"
            src="https://28-1325662301.cos.ap-shanghai.myqcloud.com/%E9%9D%92%E5%B2%9B%E5%B0%8F%E7%A8%8B%E5%BA%8F%2FGroup%202380.png" />
          <view style="font-size: 60rpx;color: #000;font-weight: 700;margin-bottom: 10rpx;">
            {{ indent == '维保' ? weibao.repairNum : indent == '巡检' ? xunjian.repairNum : zhishiku.completed }}
          </view>
          <view style="font-size: 24rpx;">
            我的今日{{ indent == '知识库' ? '考试' : '处理' }}数量
          </view>
        </view>

      </view>
      <div style="height: 20px;"></div>
      <div class="eCharts">
        <div style="height: 10px;"></div>
        <div style="margin-left:5% ;">{{ indent }}次数趋势图</div>
        <div style="height: 10px;"></div>
        <qiun-data-charts :canvas2d="true" canvasId="cSzLoQHbVGhyVGQoVMEiaJwNPHqLAyma" type="line" :opts="opts"
          :chartData="chartData" />
      </div>
      <picker @change="bindPickerChange" :value="index" :range="week">
        <div class="chooseChart"
          :style="indent == '维保' ? 'background:#fedecc' : indent == '巡检' ? 'background:#e7d3f8;color:#2e3254' : 'background:#e9f8d3;color:#2c543d'">
          <div>图表按照每{{ week[index] }}呈现</div>
        </div>
      </picker>
    </view>
    <div style="height: 20px;"></div>
    <div style="margin-left: 5%;width: 90%;" @click="weibaoList">
      <image v-show="indent == '维保'" style="width: 100%;"
        src="https://28-1325662301.cos.ap-shanghai.myqcloud.com/%E9%9D%92%E5%B2%9B%E5%B0%8F%E7%A8%8B%E5%BA%8F%2FGroup%202396.png"
        mode="widthFix" />
      <image v-show="indent == '巡检'" style="width: 100%;"
        src="https://28-1325662301.cos.ap-shanghai.myqcloud.com/%E9%9D%92%E5%B2%9B%E5%B0%8F%E7%A8%8B%E5%BA%8F%2FGroup%202397.png"
        mode="widthFix" />
      <image v-show="indent == '知识库'" style="width: 100%;"
        src="https://28-1325662301.cos.ap-shanghai.myqcloud.com/%E9%9D%92%E5%B2%9B%E5%B0%8F%E7%A8%8B%E5%BA%8F%2FGroup%202398.png"
        mode="widthFix" />
    </div>
    <div style="height: 4vh;"></div>
    <!-- <tabBar :currentPage="currentPage" :role="role" :indent="indent"></tabBar> -->
  </view>
</template>
<script>
// import tabBar from '../../compontents/tabBar/index.vue';
import { repairNum, insNum, indexIns, indexMain, knowNum, indexKnow, finishTestNum } from '../api/api.js';
import { days } from '../../common/example.js'
import qiunDataCharts from '../subpackageuni/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue';
export default {
  components: {
    // tabBar,
    qiunDataCharts
  },
  data() {
    return {
      index: 0,
      alDay: '',
      nickname: '',
      doneFinish: 0,
      indexs: 0,
      week: ['周', '月', '年'],
      weibao: {},
      xunjian: {},
      zhishiku: {},
      userInfo: {},
      flag: false,
      role: '',//司机/养殖
      chartData: {},
      chartDatas: {},
      currentPage: '',
      opts: {
        color: [
          "#f2eafc"
        ],
        padding: [15, 15, 0, 5],
        enableScroll: false,
        legend: {},
        xAxis: {
          disableGrid: true,
        },
        yAxis: {
          gridType: "dash",
          dashLength: 2
        },
        extra: {
          line: {
            type: "straight",
            width: 2,
            activeType: "hollow"
          }
        }
      },
      mainParam: ''
    };
  },
  methods: {
    proce() {
      uni.navigateTo({ url: '/pagesPlant/index/proce' })
    },
    bindPickerChange: function (e) {
      console.log('picker发送选择改变，携带值为', e.detail.value)
      this.index = e.detail.value;
      this.toggleIndex(e.detail.value)
    },
    weibaoList() {
      console.log(this.indent);
      if (this.indent === '知识库') {
        uni.navigateTo({
          url: '/pagesPlant/index/knowTask'
        })
      } else if (this.indent == '巡检') {
        uni.navigateTo({
          url: '/pagesPlant/index/inspection'
        })
      } else {
        uni.navigateTo({
          url: '/pagesPlant/index/taskTran'
        })
      }


    },
    toggleIndex(i) {
      console.log(i);

      if (this.indent == '维保') {
        if (i === 0) {
          this.mainChart(7)
          // this.indexs = index;
        } else if (i == 1) {
          this.mainChart(30)
          // this.indexs = index;
        } else if (i == 2) {
          this.mainChart(365)
          // this.indexs = index;
        }
      } else if (this.indent == '巡检') {
        if (i === 0) {
          this.insChart(7)
          // this.indexs = index;
        } else if (i == 1) {
          this.insChart(30)
          // this.indexs = index;/
        } else if (i == 2) {
          this.insChart(365)
          // this.indexs = index;
        }
      } else if (this.indent == '知识库') {
        if (i === 0) {
          this.knowChart(7)
          // this.indexs = index;
        } else if (i == 1) {
          this.knowChart(30)
          // this.indexs = index;
        } else if (i == 2) {
          this.knowChart(365)
          // this.indexs = index;
        }
      }

      // this.chartsFarm(i);
    },
    // 缴费
    fee() {
      uni.navigateTo({ url: '/pagesFarmer/index/fees' })
    },
    // 查看工单
    looks() {
      if (this.indent == '知识库') {
        if (this.zhishiku.outPend < 1) {
          uni.showToast({
            title: '暂无待参加考试',
            icon: 'none'
          })
        } else {
          uni.navigateTo({
            url: '/pagesPlant/index/save'
          })
        }

      } else if (this.indent == '维保' || this.indent == '巡检') {
        if (this.indent == '维保' && this.weibao.pendingNum <= 0) {
          uni.showToast({
            title: '暂无工单',
            icon: 'none'
          });
        } else if (this.indent == '巡检' && this.xunjian.pendingNum <= 0) {
          uni.showToast({
            title: '暂无工单',
            icon: 'none'
          });
        } else {
          uni.navigateTo({ url: '/pagesPlant/index/procedetail' })
        }

      } else {
        uni.navigateTo({ url: '/pagesDriver/system/workOrder' })
      }
    },
    //   提交
    submit() {
      uni.navigateTo({ url: '/pagesDriver/system/filling' })
    },
    // 管理
    manage() {

    },
    returnFeature() {
      uni.redirectTo({
        url: '/pagesPlant/index/feature'
      })
    },
    carStop() {
      uni.navigateTo({ url: '/pagesPlant/index/outage' })
    },
    //维保图表
    mainChart(i) {
      indexMain(i).then(rese => {
        console.log(rese.data.data, '维保图表');
        const week = rese.data.data.map((item) => item.Field)
        const value = rese.data.data.map((item) => item.count);
        let res = {
          categories: week,
          series: [
            {
              name: '维保次数',
              data: value
            }
          ]
        }
        this.chartData = JSON.parse(JSON.stringify(res));
        console.log(this.chartData, 'charDAta');
      })
    },
    insChart(i) {
      indexIns(i).then(rese => {
        console.log(rese.data, '巡检图表');
        const week = rese.data.data.map((item) => item.Field)
        const value = rese.data.data.map((item) => item.count);
        let res = {
          categories: week,
          series: [
            {
              name: '巡检次数',
              data: value
            }
          ]
        }
        this.chartData = JSON.parse(JSON.stringify(res));
      })
    },
    knowChart(i) {
      indexKnow(i).then(rese => {
        console.log(rese.data, '知识库图表');
        const week = rese.data.data.map((item) => item.Field)
        const value = rese.data.data.map((item) => item.count);
        let res = {
          categories: week,
          series: [
            {
              name: '答题次数',
              data: value
            }
          ]
        }
        this.chartData = JSON.parse(JSON.stringify(res));
      })
    }
  },
  onShow() {
    // 已加入
    days({}).then(res => {
      console.log(res.data, '已加入');
      if (res.data.code == 200) {
        this.alDay = res.data.data || 0
      }
    })
    uni.hideHomeButton();
    // this.role = uni.getStorageSync('userInfo').remark;
    this.indent = uni.getStorageSync('pageIndent');
    this.role = uni.getStorageSync('userInfo').role;
    this.nickname = uni.getStorageSync('userInfo').nickName;
    //维保数量
    if (this.indent == '知识库') {
      uni.setNavigationBarTitle({
        title: '知识库'
      });
    } else if (this.indent == '巡检') {
      uni.setNavigationBarTitle({
        title: '巡检中心'
      });
    } else if (this.indent == '维保') {
      uni.setNavigationBarTitle({
        title: '维保中心'
      });
    }
    if (this.indent == '维保') {
      repairNum().then(res => {
        console.log(res.data, '维保首页');
        if (res.data.code == 200) {
          this.weibao = res.data.data;
          // let valueFloat = parseFloat(this.weibao.repairRate.replace('%', ''));
          // let valueFormatted = valueFloat.toFixed(1);
          // this.weibao.repairRate = valueFormatted+'%';
        }
      })
      this.mainChart(7);
    } else if (this.indent == '巡检') {
      insNum().then(res => {
        console.log(res.data, '巡检首页');
        if (res.data.code == 200) {
          this.xunjian = res.data.data;
          // let valueFloat = parseFloat(this.xunjian.repairRate.replace('%', ''));
          // let valueFormatted = valueFloat.toFixed(1);
          // this.xunjian.repairRate = valueFormatted+'%';
        }
      })
      this.insChart(7);
    } else if (this.indent == '知识库') {
      knowNum().then(res => {
        console.log(res.data, '知识库首页');
        if (res.data.code == 200) {
          this.zhishiku = res.data.data;
        }
      })
      finishTestNum({
        taskState: 0
      }).then(res => {
        if (res.data.code == 200) {
          this.doneFinish = res.data.data || 0;
        }
      })
      this.knowChart(7);
    }

  },

  onLoad() {
    var pages = getCurrentPages();
    let currentPageRoute = pages[pages.length - 1].route;
    // 根据当前页面路径设置currentPage
    this.currentPage = currentPageRoute;
    console.log(this.currentPage);
  }
};
</script>
<style lang="scss">
.eCharts {
  width: 90%;
  margin-left: 5%;
  border-radius: 15px 15px 0 0;
  background: #ffffff;
}

.chooseChart {
  width: 90%;
  margin-left: 5%;
  border-radius: 0 0 15px 15px;
  background: #fedecc;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f37a52;
}

.grid_box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 90%;
  margin-left: 5%;
}

.cilcle {
  font-size: 30px;
}

.fontTitle {
  font-size: 20px;
  font-weight: 500;
}

.topBgc {
  background: #e7d3f8;
  border-radius: 15px;
  width: 90%;
  margin-left: 5%;
  // height: 30vh;
}

page {
  background-color: #f8f3f2;
}

.container {
  // background: #f6f3e7;
  height: 100%;
  min-height: 100vh;
  overflow-y: scroll;
  // position: absolute;
  // left: 0;
  width: 100vw;
}

.carStop {
  display: flex;
  justify-content: center;
  align-items: center;
  background: green;
  padding-right: 10px;
  padding-left: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  border-radius: 50%;
  color: #fff;
}

.stopIn {}

.card {
  // border: 3px solid #1a512c;s
  border-radius: 10px;
}

.center-bg {
  background: #1a512c;
  color: #fff;
  // width: 95%;
  // margin-left: 2.5%;
  border-radius: 10px;
}

.charts-box {
  width: 100%;
  // height: 230px;
  background: #fff;
  position: relative;
  border-radius: 10px;
}

.foot-card {
  background: #fff;
  border-radius: 10px;
}

.look {
  background: #1a512c;
  color: #fff;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.looks {
  background: #D0463F;
  color: #fff;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tabBar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 9vh;
}

.leftArrow {
  background: green;
  border-radius: 5px;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 10px;
  padding-right: 10px;
}

.title {
  font-size: 24px;
  color: #1A512C;
  font-weight: 700;
}

.roundDate {
  border-radius: 50%;
  border: 2px solid #1A512C;
  height: 75rpx;
  font-weight: 600;
  width: 75rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1A512C;
  background-color: #F6F3E7
}

.active {
  background: #1A512C;
  color: #fff;
}
</style>